<template>
  <div class="AddOrUpdate_main column_three add_container">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <div class="noticeTitle">
          <span>{{ formData.noticeTitle }}</span>
        </div>
        <div class="double">
          <span>发布时间：</span>
          <span>{{ formData.noticeTime }}</span>
        </div>
        <div class="main_noticeContent">
          <rich-text
            ref="wangEditorRef"
            :disabled="editorParams.isDisabled"
            :editor-params="editorParams"
          />
        </div>
      </el-form>
    </div>
    <div />
  </div>
</template>

<script>
import { getInfo } from '@/api/system/notice'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {},
    showData: {}
  },
  data() {
    return {
      radio: '1',
      selectedOptions: [],
      editorParams: {
        content: '', // 富文本内容
        placeholder: '请填写内容', // 富文本占位内容
        isDisabled: true // 富文本是否禁用
      },
      formData: {
        id: undefined,
        announcementTypeCode: '',
        noticeTime: '',
        noticeContent: '',
        noticeTitle: '',
        endTime: '',
        isScreen: '1',
        showType: '',
        fileNames: '',
        fileRealNames: '',
        url: '',
        deptJsonStr: [],
        deptIds: []
      },
      deptProps: {
        label: 'label',
        value: 'id',
        children: 'children',
        multiple: true },
      deptData: [],
      roleOptions: [],
      userOptions: [
        { id: 0, label: '滚动' }
      ],
      readUnread: [],
      deptNameStrData: [],
      toolbarConfig: { },
      mode: 'default' // or 'simple'
    }
  },
  created() {
    this.getInfo()
    console.log(this.id)
  },
  methods: {
    getInfo() {
      getInfo(this.id).then(res => {
        this.formData = res.data
        this.readUnread = this.formData.readStr.split(',')
        this.selectedOptions = JSON.parse(this.formData.deptJsonStr)
        this.editorParams.content = this.formData.noticeContent
        // 获取公司部门name
        const deptJsonStr1 = JSON.parse(this.formData.deptNameStr)
        const deptJsonStr2 = deptJsonStr1.flat(Infinity)
        this.deptNameStrData = [...new Set(deptJsonStr2)]
      })
    },
    isShowType() {
      if (this.formData.isScreen == '2') {
        this.formData.showType = '0'
      } else {
        this.formData.showType = ''
      }
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    setFileName(...data) {
      this.formData.fileNames = data[0]
      this.formData.fileRealNames = data[1]
      this.formData.fileUrl = data[2]
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-collapse-item__wrap {
  border-bottom: none !important;
}
/deep/ .w-e-scroll>div {
  padding-left: 0px !important;
}
/deep/ .notice_main_text {
  border: none !important;
}
/deep/ .el-collapse {
  border: none!important;
  font-size: 14px;
}
/deep/ .el-collapse-item__header {
  border: none!important;
  font-size: 14px;
  padding-bottom: 16px;
}
.double{
  width: 100%;
  font-size: 13px;
  margin-bottom: 15px;
  color: rgba(153,153,153,1);
}
.notice_main{
  /deep/ .el-textarea__inner{
    height: 500px;
  }

}
/deep/ .el-form--inline {
  display: block !important;
  height: 100%;
  .el-form-item {
    margin-left: 0 !important;
  }
}
.main_noticeContent {
  width: calc(100% - 40px) !important;
  /deep/.notice_main_editor {
    height: 100% !important;
  }
  .el-form-item {
    width: 100% !important;
    display: block !important;
    /deep/ .el-form-item__content {
      width: calc(100% - 1px) !important;
      padding-left: 8px ;
      padding-top: 5px;
    }
  }
  /deep/ .el-form-item__error {
    padding-left: 10px ;
  }
  .noticeContent {
    .el-form-item__content {
      width: 100% !important;
    }
  }
}
.noticeTitle {
  width: calc(100% - 40px) !important;
  margin-bottom: 5px;
  .el-form-item__content {
    width: calc(100% - 40px) !important;
  }
  span {
    font-weight: bold;
    font-size: 18px !important;
  }
}
.main_main_bottom {
  display: flex;
  padding: 0px 20px;
  height: 70px;
  .main_bottom_one {
    display: flex;
    flex: 1;
    align-items: center
  }
  .main_bottom_two {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
.announceScope {
  display: flex;
  //flex-flow:row wrap;
  span {
    line-height: 35px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    width: 80px;
  }
  .main_demonstration{
    width: 100%;
    display: flex;
    flex-flow:row wrap;
    /deep/.el-collapse-item__content {
      display: flex;
    }
    .main_deptNameStr_box {
      padding: 0 20px;
      background-color: rgb(247,248,250);
      font-size: 14px;
      margin-right: 10px;
      margin-bottom: 10px;
      height: 30px;
      display: flex;
      align-items: center;
      flex-flow:row wrap
    }

  }
}
.readUnread {
  display: flex;
  color: rgba(153,153,153,1);
  margin-top: 20px;
  .main_read {
    display: flex;
    font-size: 14px;
    color: rgba(153,153,153,1);
  }
  .main_unread {
    display: flex;
    font-size: 14px;
  }
}
.accessory {
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 10px;
  width: 100%;
  /deep/ .el-form-item__label {
    width: 60px !important;
    margin-right: 16px !important;
  }
  /deep/.el-form-item__label::before {
    margin-right: 0px !important;
  }
  .FileManageFull_container {
    align-items: flex-start !important;
  }
}
.main_main {
  padding: 20px 20px 0 20px !important;
  margin-bottom: 20px;
  .main_main_title {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: calc(33.33% - 40px);
      margin-left: 0px;
      margin-right: 40px;
    }
  }
  .main_main_center {
    padding-bottom: 22px;
    display: flex;
    .center_board {
      .el-form-item {
        margin-bottom: 0 !important;
        margin-left: 0 !important;
      }
    }
    .center_board_mode {
      padding-left: 20px;
    }
  }
}
.noPic{
  height: 30px;
  display: flex;align-items: center;
  background-color: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #dfe4ed;
  padding: 0px 20px;
  color: #c0c4cc;
  margin-bottom: 10px;
}
</style>
